<template>
    <div class="invoice">
        <el-header class="title" style="position: relative;top: 20px;font-size: 20px">
            <i class="el-icon-user-solid">基本信息</i>
        </el-header>
        <el-divider></el-divider>
        <el-form :model="fy" label-width="100px" style="margin-left: 20px">
            <div class="require">
                <el-container style="margin-top: 20px">
                    <el-form-item label="案件：">
                        <el-select v-model="fy.caseid" :value="fy.caseid" style="width: 500px">
                            <el-option
                                    :key="caseLaw.id"
                                    v-for="caseLaw in caseLawList"
                                    :label="caseLaw.caseNo"
                                    :value="caseLaw.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审判程序：" style="margin-left: 20px">
                        <el-input v-model="fy.flow" style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="审判机关：">
                        <el-input v-model="fy.spjg" style="width: 500px;"></el-input>
                    </el-form-item>
                </el-container>
            </div>

            <div class="other-container">
                <el-header class="title" style="position: relative;top: 20px;left:-20px;font-size: 20px">
                    <i class="el-icon-user-solid">其他选填</i>
                    <el-button size="small" @click="handleToggleOther" class="toogle">{{other.text}}</el-button>
                </el-header>

                <div class="other" v-if="other.enable" style="margin-top: 20px">
                    <el-container>
                        <el-form-item label="立案日期：">
                            <el-date-picker
                                    :pickerOptions="pickerOptions"
                                    v-model="fy.lnsj"
                                    align="right"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    style="width: 500px">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="提前">
                            <el-input type="number" v-model="fy.lntx" style="width: 200px;"></el-input>天提醒
                        </el-form-item>
                    </el-container>
                    <el-container>
                        <el-form-item label="开庭时间：">
                            <el-date-picker
                                    :pickerOptions="pickerOptions"
                                    v-model="fy.ktsj"
                                    align="right"
                                    type="datetime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期"
                                    style="width: 500px">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="提前">
                            <el-input type="number" v-model="fy.kttx" style="width: 200px;"></el-input>天提醒
                        </el-form-item>
                    </el-container>
                    <el-container>
                        <el-form-item label="宣判日期：">
                            <el-date-picker
                                    :pickerOptions="pickerOptions"
                                    v-model="fy.xprq"
                                    align="right"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    style="width: 500px">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="提前">
                            <el-input type="number" v-model="fy.xptx" style="width: 200px;"></el-input>天提醒
                        </el-form-item>
                    </el-container>
                    <el-container>
                        <el-form-item label="上诉日期：">
                            <el-date-picker
                                    :pickerOptions="pickerOptions"
                                    v-model="fy.ssrq"
                                    align="right"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    style="width: 500px">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="提前">
                            <el-input type="number" v-model="fy.sstx" style="width: 200px;"></el-input>天提醒
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="法庭：">
                            <el-input v-model="fy.ft" style="width: 500px;"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="主审法官：">
                            <el-input v-model="fy.fg" style="width: 500px;"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话：">
                            <el-input v-model="fy.fgtel" style="width: 400px;"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="书记员：">
                            <el-input v-model="fy.sjy" style="width: 500px;"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话：">
                            <el-input v-model="fy.sjtel" style="width: 400px;"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="备注：">
                            <el-input type="textarea" v-model="fy.remark" style="width: 1000px;"></el-input>
                        </el-form-item>
                    </el-container>
                </div>

                <el-container style="margin-top: 20px">
                    <el-form-item>
                        <el-button type="primary" @click="handleSubmitForm">确认提交</el-button>
                        <el-button @click="handleBack">返回</el-button>
                    </el-form-item>
                </el-container>
            </div>
        </el-form>
    </div>
</template>

<script>
    //引入服务类
    import CaseLawService from '../../../model/gs/CaseLawService.js'
    const caseLawService = CaseLawService.getInstance()

    export default {
        props:['fy','status'],
        data() {
            return {
                other:{
                    text:'展开',
                    enable:false
                },
                caseLawList:[],
                //时间校验配置
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now();//设置选择今天之后的日期（不能选择当天时间）
                    },
                },
            }
        },
        methods:{
            //获取所有案件
            getCaseLaws(){
                caseLawService.list().then(response => {
                    if(response.data.code === 0){
                        this.caseLawList = response.data.data
                    }
                })
            },
            //切换其他选项是否显示
            handleToggleOther(){
                this.other.enable = !this.other.enable
                if(this.other.enable){
                    this.other.text = '收起'
                }else{
                    this.other.text = '展开'
                }
            },
            //表单提交的方法
            handleSubmitForm(){
                if(this.status == 'add'){
                    this.$emit('add')
                }else{
                    this.$emit('update')
                }
            },
            handleBack(){
                this.$emit('back')
            }
        },
        created(){
            this.getCaseLaws()
        }
    }
</script>

<style scoped>
    .invoice{
        width: 100%;
    }
    .require{
        width: 100%;
    }
    .message{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-left: 8px;
    }
    .bg-purple {
        border: 1px solid gainsboro;
        width: 32%;
        padding-top: 15px;
        height: 70px;
        padding-left: 10px;
    }
    .other-container{
        width: 100%;
    }
    .other{
        width: 100%;
    }
    .toogle{
        position: relative;
        top: -5px;
        margin-left: 30px;
    }
</style>